@blue: #007bff;
@indigo: #6610f2;
@purple: #6f42c1;
@pink: #e83e8c;
@red: #dc3545;
@orange: #fd7e14;
@yellow: #ffc107;
@green: #28a745;
@teal: #20c997;
@cyan: #17a2b8;
@white: #fff;
@gray: #6c757d;
@gray-dark: #343a40;
@primary: #007bff;
@secondary: #6c757d;
@success: #28a745;
@info: #17a2b8;
@warning: #ffc107;
@danger: #EC6162;
@light: #f8f9fa;
@dark: #343a40;
@color:#3376D0;
// @bg-color:#F5F7FC;
// @bg-color:#CACACA;
@bg-color:#EAEAEA;
@main-color:#212121;
@font-color:#A8A8AC;
@font-hover:#8E8E93;
@small-color:#AEAEAE;

.center(){
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
/*
 * 移动端1px border border实现方式
 * @dir border方向：around上下左右 ；left 左 ；right 右；top 上； bottom 下；默认around
 * @color border颜色 :默认#E6E6E6
 */
.border-1px(@dir:around,@bcolor:#E6E6E6) when (@dir=around),(@dir=null){
    position: relative;
    margin-bottom: 20px;
    border:none;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid @bcolor;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
        &:after{
          -webkit-transform: scale(0.7);
          transform: scale(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
        &:after{
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
        }      
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        &:after{
          -webkit-transform: scale(0.33);
          transform: scale(0.33);
        }      
    }  
}
.border-1px(@dir:around,@bcolor:#E6E6E6) when (@dir=top){
    position: relative;
    &:before{
        display: block;
        position: absolute;
        left: 0;
        right:0;
        @{dir}: 0;
        border-@{dir}: 1px solid @bcolor;
        content: ' ';    
    }
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
        &:before{
           -webkit-transform: scaleY(0.7);
           transform: scaleY(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
        &:before{
           -webkit-transform: scaleY(0.5);
           transform: scaleY(0.5);
        }      
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        &:before{
           -webkit-transform: scaleY(0.33);
           transform: scaleY(0.33);
        }      
    }
}
.border-1px(@dir:around,@bcolor:#E6E6E6) when (@dir=bottom){
    position: relative;
    &:after{
        display: block;
        position: absolute;
        left: 0;
        right:0;
        @{dir}: 0;
        border-@{dir}: 1px solid @bcolor;
        content: ' ';    
    }
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
        &:after{
           -webkit-transform: scaleY(0.7);
           transform: scaleY(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
        &:after{
           -webkit-transform: scaleY(0.5);
           transform: scaleY(0.5);
        }      
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        &:after{
           -webkit-transform: scaleY(0.33);
           transform: scaleY(0.33);
        }      
    }
}
.border-1px(@dir:around,@bcolor:#E6E6E6) when (@dir=left){
    position: relative;
    &:before{
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        @{dir}: 0;
        border-@{dir}: 1px solid @bcolor;
        content: ' ';    
    }
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
        &:before{
           -webkit-transform: scaleX(0.7);
           transform: scaleX(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
        &:before{
           -webkit-transform: scaleX(0.5);
           transform: scaleX(0.5);
        }      
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        &:before{
           -webkit-transform: scaleX(0.33);
           transform: scaleX(0.33);
        }      
    }
}
.border-1px(@dir:around,@bcolor:#E6E6E6) when (@dir=right){
    position: relative;
    &:after{
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        @{dir}: 0;
        border-@{dir}: 1px solid @bcolor;
        content: ' ';    
    }
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
        &:after{
           -webkit-transform: scaleX(0.7);
           transform: scaleX(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
        &:after{
           -webkit-transform: scaleX(0.5);
           transform: scaleX(0.5);
        }      
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        &:after{
           -webkit-transform: scaleX(0.33);
           transform: scaleX(0.33);
        }      
    }
}/*
 * 移动端没有border样式实现
 */
.border-none(){
    &:after{
        display: none; 
    }
}
/*
 * 清除浮动
 */
.clear(){
    zoom:1;
    &:after{
        content:"";
        display:block;
        height:0;
        clear:both;
    }
}
/*
 * 单行文本溢出部分显示省略号
 */
.text-ellipsis(){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
 * 多行文本溢出部分显示省略号
 */
.text-multi-ellipsis(@row,@height){
    position: relative;
    height:auto;
    max-height:unit(@height * @row,px) !important;
    line-height:unit(@height,px);
    overflow: hidden;
    &:after{
        content:'...';
        position: absolute;
        bottom: 0;
        right:0;
        padding: 0 5px 2px 30px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
}
.text-ellipsis-none(){
    &:after{
        display:none;
    }
}
/*
 * flex布局封装
 */
.flex-wrapper(@wrap:wrap,@justifyContent:center,@alignItem:center,@alignContent:center){
    display:flex;
    flex-wrap:@wrap;
    justify-content: @justifyContent;
    align-items: @alignItem;
    align-content: @alignContent;
}
.flex-empty(){
    height:0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-image:none;
    border:none;
    &:after{
        display: none; 
    }
}
/*
 * 自定义tooltip
 */
.tooltip(){
    position: relative;
    &:hover:after{
        content:attr(data-tooltip);
        position: absolute;
        right:0;
        bottom: 0;
    }
}
/*
 * 搜索框
 */
.search-group(@col:rgba(255,255,255,.8),@bcol:rgba(255,255,255,.3),@h:40){
    height:unit(@h,px);
    line-height:unit(@h,px);
    box-sizing: border-box;
    border-radius:30px;
    background-color: @bcol;
    input[type="text"]{
        float:left;
        width:calc(100% - 40px);
        height:100%;
        text-indent: 1rem;
				color:@col;
        &::-webkit-input-placeholder{
            color:@col;
        }
    }
    button{
        float:left;
        height:100%;
        width:40px;
        text-align:center;
        .iconfont{
            font-size:2rem;
						color:@col;
        }
    }
}

::selection{
    background: none repeat scroll 0 0 @color;
    color:rgba(255, 255, 255, 0.85);
}
/*
	*header
*/
header{
	height:40px;
	line-height:40px;
	color:@color;
	background-color:@white;
	position:relative;
	// .border-1px(bottom);
	.left,.right{
		padding-left:10px;
		padding-right:10px;
		position:absolute;
		line-height:40px;
		color:@font-color;
		font-size:1.8rem;
		font-weight:500;
		top:0;
		&.left{
			left:0;
		}
		&.right{
			right:0;
		}
		.iconfont{
			padding:0 5px;
			font-size:2rem;
		}
	}
	.center{
		text-align: center;
		font-size:1.8rem;
		font-weight:800;
	}
}
.nomsg{
	text-align: center;
	line-height:100px;
	font-size:1.6rem;
}
::-webkit-input-placeholder { /* WebKit browsers */ 
	color: @font-color; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
	color: @font-color; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
	color: @font-color; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
	color: @font-color; 
} 

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.noMsg{
	text-align: center;
	line-height:100px;
}
.left{
	float:left;
}
